{% extends 'base.html' %}

{% load static %}

<!-- =========================
     PRE LOADER
============================== -->


<!-- =========================
     NAVIGATION LINKS
============================== -->

{% block content %}

    <!-- =========================
        首页背景
    ============================== -->
    <section id="intro" class="parallax-section">
        <div class="container" >

            <div class="row">

                <!--<script>window.jQuery || document.write('<script src="{% static 'js/jquery-2.1.1.min.js' %}"><\/script>')</script>-->
                <script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
                <script src="{% static 'js/vidbg.js' %}"></script>
                <script type="text/javascript">
                    jQuery(function ($) {
                        $('#intro').vidbg({
                            'mp4': '{% static "images/mp4.mp4" %}'

                        }, {
                            // Options
                            muted: true,
                            loop: true,
                            overlay: true
                        });
                    });
                </script>

                <div class="col-md-12 col-sm-12">
                    <h1 class="wow bounceIn" data-wow-delay="0.9s">西电安全私有云系统</h1>
                    <h1 class="wow fadeInUp" data-wow-delay="1.6s">DragonStack</h1>
                    <a href="#faq" class="btn btn-lg btn-default smoothScroll wow fadeInUp hidden-xs"
                       data-wow-delay="2.3s">LEARN MORE</a>
                    <a href="{% url 'users:regist' %}" class="btn btn-lg btn-danger smoothScroll wow fadeInUp"
                       data-wow-delay="2.3s">立即注册</a>
                </div>


            </div>
        </div>
    </section>


    <!-- =========================
        虚拟云
    ============================== -->
    <section id="overview" class="parallax-section">
        <div class="container">
            <div class="row">

                <div class="wow fadeInUp col-md-6 col-sm-6" data-wow-delay="0.6s">
                    <h2>虚拟云服务</h2>
                    <p>
                        虚拟云主机服务通过SSD硬盘或者U盘，在短时间内简单快捷的部署专用的云计算平台，包含IaaS服务（基础设施服务）以及资源监控，极大程度上降低技术难度于维护成本，使用户集中于应用开发或使用，以极低的成本拥有云计算平台。</p>
                    <a href="{% url 'vm:virtualhost' %}" class="btn btn-lg btn-danger smoothScroll wow fadeInUp"
                       data-wow-delay="2.3s">立即使用</a>
                </div>

                <div class="wow fadeInUp col-md-6 col-sm-6" data-wow-delay="0.9s">
                    <img src="{% static 'images/overview-img.jpg' %}" class="img-responsive" alt="Overview">
                </div>

            </div>
        </div>
    </section>


    <!-- =========================
        DETAIL SECTION
    ============================== -->
    <section id="detail" class="parallax-section">
        <div class="container">
            <div class="row">

                <div class="wow fadeInLeft col-md-4 col-sm-4" data-wow-delay="0.3s">
                    <i class="fa fa-linux"></i>
                    <h3>Linux</h3>
                </div>

                <div class="wow fadeInUp col-md-4 col-sm-4" data-wow-delay="0.6s">
                    <i class="fa fa-windows"></i>
                    <h3>Windows</h3>
                </div>

                <div class="wow fadeInRight col-md-4 col-sm-4" data-wow-delay="0.9s">
                    <i class="fa fa-desktop"></i>
                    <h3>Windows Server</h3>
                </div>

            </div>
        </div>
    </section>

    <!-- =========================
        多域协同
    ============================== -->
    <section id="multiple" class="parallax-section">

        <div class="container">
            <div id="left-main" style="width:30%;height:650px;float:left;">
                <table>
                    <tr>
                        <td><p style="color:#000;font-size:30px;align:center;">多域协同</p></td>
                    </tr>
                    <tr>
                        <td><p style="color:#707070;font-size:16px;align:center;">
                            提出并实现了多云协同的云计算资源管理体系架构，实现计算存储资源的跨域协同管理，数据共享，支持跨域协同计算，满足分布式应用系统的基本需求的同时提高实时性和扩展性。
                        </p></td>
                    </tr>
                </table>
            </div>


            <div id="main" style="width:70%;height:650px;float:left;"></div>
        </div>

    </section>




    <script>
        var myChart = echarts.init(document.getElementById("main"));
        var geoCoordMap = {
            '上海': [121.4648, 31.2891],
            '东莞': [113.8953, 22.901],
            '东营': [118.7073, 37.5513],
            '中山': [113.4229, 22.478],
            '临汾': [111.4783, 36.1615],
            '临沂': [118.3118, 35.2936],
            '丹东': [124.541, 40.4242],
            '丽水': [119.5642, 28.1854],
            '乌鲁木齐': [87.9236, 43.5883],
            '佛山': [112.8955, 23.1097],
            '保定': [115.0488, 39.0948],
            '兰州': [103.5901, 36.3043],
            '包头': [110.3467, 41.4899],
            '北京': [116.4551, 40.2539],
            '北海': [109.314, 21.6211],
            '南京': [118.8062, 31.9208],
            '南宁': [108.479, 23.1152],
            '南昌': [116.0046, 28.6633],
            '南通': [121.1023, 32.1625],
            '厦门': [118.1689, 24.6478],
            '台州': [121.1353, 28.6688],
            '滁州': [117.29, 32.0581],
            '呼和浩特': [111.4124, 40.4901],
            '咸阳': [108.4131, 34.8706],
            '哈尔滨': [127.9688, 45.368],
            '唐山': [118.4766, 39.6826],
            '嘉兴': [120.9155, 30.6354],
            '大同': [113.7854, 39.8035],
            '大连': [122.2229, 39.4409],
            '天津': [117.4219, 39.4189],
            '太原': [112.3352, 37.9413],
            '威海': [121.9482, 37.1393],
            '宁波': [121.5967, 29.6466],
            '宝鸡': [107.1826, 34.3433],
            '宿迁': [118.5535, 33.7775],
            '常州': [119.4543, 31.5582],
            '广州': [113.5107, 23.2196],
            '廊坊': [116.521, 39.0509],
            '延安': [109.1052, 36.4252],
            '张家口': [115.1477, 40.8527],
            '徐州': [117.5208, 34.3268],
            '德州': [116.6858, 37.2107],
            '惠州': [114.6204, 23.1647],
            '成都': [103.9526, 30.7617],
            '扬州': [119.4653, 32.8162],
            '承德': [117.5757, 41.4075],
            '拉萨': [91.1865, 30.1465],
            '无锡': [120.3442, 31.5527],
            '日照': [119.2786, 35.5023],
            '昆明': [102.9199, 25.4663],
            '杭州': [119.5313, 29.8773],
            '枣庄': [117.323, 34.8926],
            '柳州': [109.3799, 24.9774],
            '株洲': [113.5327, 27.0319],
            '武汉': [114.3896, 30.6628],
            '汕头': [117.1692, 23.3405],
            '江门': [112.6318, 22.1484],
            '沈阳': [123.1238, 42.1216],
            '沧州': [116.8286, 38.2104],
            '河源': [114.917, 23.9722],
            '泉州': [118.3228, 25.1147],
            '泰安': [117.0264, 36.0516],
            '泰州': [120.0586, 32.5525],
            '济南': [117.1582, 36.8701],
            '济宁': [116.8286, 35.3375],
            '海口': [110.3893, 19.8516],
            '淄博': [118.0371, 36.6064],
            '淮安': [118.927, 33.4039],
            '深圳': [114.5435, 22.5439],
            '清远': [112.9175, 24.3292],
            '温州': [120.498, 27.8119],
            '渭南': [109.7864, 35.0299],
            '湖州': [119.8608, 30.7782],
            '湘潭': [112.5439, 27.7075],
            '滨州': [117.8174, 37.4963],
            '潍坊': [119.0918, 36.524],
            '烟台': [120.7397, 37.5128],
            '玉溪': [101.9312, 23.8898],
            '珠海': [113.7305, 22.1155],
            '盐城': [120.2234, 33.5577],
            '盘锦': [121.9482, 41.0449],
            '石家庄': [114.4995, 38.1006],
            '福州': [119.4543, 25.9222],
            '秦皇岛': [119.2126, 40.0232],
            '绍兴': [120.564, 29.7565],
            '聊城': [115.9167, 36.4032],
            '肇庆': [112.1265, 23.5822],
            '舟山': [122.2559, 30.2234],
            '苏州': [120.6519, 31.3989],
            '莱芜': [117.6526, 36.2714],
            '菏泽': [115.6201, 35.2057],
            '营口': [122.4316, 40.4297],
            '葫芦岛': [120.1575, 40.578],
            '衡水': [115.8838, 37.7161],
            '衢州': [118.6853, 28.8666],
            '西宁': [101.4038, 36.8207],
            '西安': [109.1162, 34.2004],
            '贵阳': [106.6992, 26.7682],
            '连云港': [119.1248, 34.552],
            '邢台': [114.8071, 37.2821],
            '邯郸': [114.4775, 36.535],
            '郑州': [113.4668, 34.6234],
            '鄂尔多斯': [108.9734, 39.2487],
            '重庆': [107.7539, 30.1904],
            '金华': [120.0037, 29.1028],
            '铜川': [109.0393, 35.1947],
            '银川': [106.3586, 38.1775],
            '镇江': [119.4763, 31.9702],
            '长春': [125.8154, 44.2584],
            '长沙': [113.0823, 28.2568],
            '长治': [112.8625, 36.4746],
            '阳泉': [113.4778, 38.0951],
            '青岛': [120.4651, 36.3373],
            '韶关': [113.7964, 24.7028],
            '广元': [105.5100, 32.2800]
        };
        var BJData = [
            [{name: '郑州', value: '在线公有域'}, {name: '西安', value: "河南工业大学"}],
            [{name: '深圳', value: '应用域'}, {name: '西安', value: "深福保"}],
            [{name: '石家庄', value: '离线公有域'}, {name: '西安', value: "河北师范大学"}],
            [{name: '青岛', value: '应用域'}, {name: '西安', value: "总参61419部队"}],
            [{name: '无锡', value: '应用域'}, {name: '西安', value: "中国科学院无锡物联网研究中心"}],
            [{name: '海口', value: '应用域'}, {name: '西安', value: "海南大学"}],
            [{name: '广元', value: '应用域'}, {name: '西安', value: "广元公安"}],
            [{name: '西安', value: '在线公有域'}, {name: '西安', value: "西电北校区"}],
            [{name: '广州', value: '应用域'}, {name: '西安', value: "暨南大学"}],
            [{name: '滁州', value: '应用域'}, {name: '西安', value: "滁州学院"}],
            [{name: '北京', value: '应用域'}, {name: '西安', value: "中央财经大学"}],
        ];
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push([
                        {
                            coord: fromCoord,
                            value: dataItem[0].value
                        },
                        {
                            coord: toCoord,
                        }
                    ]);
                }
            }
            return res;
        };

        var color = ['#a6c84c', '#ffa022', 'green'];
        var series = [];
        [['西安', BJData]].forEach(function (item, i) {
            series.push(
                {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {//涟漪特效
                        period: 4,//动画时间，值越小速度越快
                        brushType: 'stroke', //波纹绘制方式 stroke, fill
                        scale: 6 //波纹圆环最大限制，值越大波纹越大
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',//显示位置
                            offset: [5, 0], //偏移设置
                            formatter: '{b}' //圆环显示文字
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    symbol: 'circle',
                    symbolSize: 10,
                    // function (val) {
                    //       return 5 + val[2] / 10; //圆环大小
                    //   },
                    itemStyle: {
                        normal: {
                            show: false,
                            color: '#f00'
                        }
                    },
                    data: item[1].map(function (dataItem) {
                        return {
                            name: dataItem[0].name,
                            value: geoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                        };
                    }),
                },
            );
        });


        option = {
            backgroundColor: '#efefef',
            title: {
                text: '',
                textStyle: {
                    color: '#000',
                    fontSize: 30,
                    align: 'center',
                    width: '100%',
                },


            },
            tooltip: {
                trigger: 'item',
                backgroundColor: 'rgba(12, 204, 104, 0.92)',
                borderColor: '#FFFFCC',
                showDelay: 0,
                hideDelay: 0,
                enterable: true,
                transitionDuration: 0,
                extraCssText: 'z-index:100',
                formatter: function (params, ticket, callback) {
                    //根据业务自己拓展要显示的内容
                    var res = "";
                    console.log(params);
                    console.log(BJData[1][0].value);
                    var name = params.name;
                    var index = "";
                    //	var value = params.value[2];
                    for (var i = 0; i < BJData.length; i++) {
                        if (BJData[i][0].name == name) {
                            index = i;
                        }
                    }
                    var property = BJData[index][1].value;
                    res = "<span style='color:red;'>" + name + "</span><br/>域所在地：" + property;
                    return res;
                }
            },
            visualMap: { //图例值控制
                type: 'piecewise',
                // splitNumber:3,
                dimension: 2,
                categories: ['在线公有域', '应用域', '离线公有域'],
                selectedMode: 'multiple',
                color: ['red', '#006edd', 'lime'],
                textStyle: {
                    color: '#707070'
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                zoom: 1.1,
                roam: false, //是否允许缩放
                layoutCenter: ['50%', '58%'], //地图位置
                layoutSize: "100%",
            },

            series: series
        };
        myChart.setOption(option);
        var counts = option.series[0].data.length; //获取所有闪动圆环数量
        var dataIndex = 0;

        //让圆环的提示框自动触发轮播显示
        function autoHoverTip() {
            for (var i = 0; i < counts; i++) {
                (function (i) {
                    ts = setTimeout(function () {
                        myChart.dispatchAction({
                            type: 'showTip',
                            seriesIndex: 1,
                            dataIndex: i
                        });
                    }, 5000 * i);
                })(i);python
            }
        }

        setTimeout(function () {
            autoHoverTip();
            tv = setInterval(autoHoverTip, counts * 5600);
        }, 500);

    </script>



    <!-- =========================
        对象存储
    ==============================-->
    <section id="venue" class="parallax-section">
        <div class="container">
            <div class="row">
                <div class="wow fadeInLeft col-md-offset-1 col-md-5 col-sm-8" data-wow-delay="0.9s">
                    <h2>对象存储</h2>
                    <p>DragonStack云存储采用对象存储技术(Object-based Storage Device
                        简称OSD)，综合了网络附加存储(NAS)和存储局域网(SAN)的优点，同时具有SAN的高速直接访问和NAS的分布式数据共享等优势，提供了具有高性能、高可靠性、跨平台以及安全的数据共享的存储体系结构。</p>
{#                    <!--<a href="{% url 'storage:apply_storage' %}" class="btn btn-lg btn-danger smoothScroll wow fadeInUp" data-wow-delay="2.3s">立即加入</a-->#}
                    >
                    <a target="_blank" href="http://222.25.188.1:50365/"
                       class="btn btn-lg btn-danger smoothScroll wow fadeInUp" data-wow-delay="2.3s">立即加入</a>

                </div>

            </div>
        </div>
    </section>

    <!-- =========================
       计算集群
    ============================== -->
    <section id="comput" class="parallax-section">
        <div class="container">
            <div class="row">

                <div class="wow fadeInUp col-md-7 col-sm-7 com-font" data-wow-delay="0.6s">
                    <h2>计算集群</h2>

                    <p>基于DragonStack
                        Cloud云计算平台的Hadoop/Spark计算集群，可以为用户提供方便快捷的集群计算任务。用户只需上传目标数据、任务文件，即可由平台自动进行集群计算，并且向用户提供计算结果。用户无需关注集群创建、环境配置等等与计算任务无关的工作，聚焦于计算本身。</p>
                    <a target="_blank" href="http://222.25.188.1:50157/index/"
                       class="btn btn-lg btn-danger smoothScroll wow fadeInUp com-button" data-wow-delay="2.3s">立即使用</a>

                </div>

                <div class="wow fadeInUp col-md-5 col-sm-5" data-wow-delay="1s">

                </div>

                <div class="col-md-1"></div>

            </div>
        </div>
    </section>
    <!-- =========================
       ovs
    ============================== -->

    <!-- =========================
       物联网
    ============================== -->
    <section id="register" class="parallax-section">
        <div class="container">
            <div class="row">

                <div class="wow fadeInUp col-md-7 col-sm-7" data-wow-delay="0.6s">
                    <h2>物联网</h2>
                    <h3>形象化、专业化的展示历史数据，提供不同节点间的数据对比分析</h3>
                    <p>应对数据项目进行灵活定义； 为开发者一个兼容的、开放的、安全的、可扩展的平台，可将各种传感器数据存储到数据中心；
                        根据用户预设的策略，系统自动侦查异常情况，提供了根据传感器数据变动而自动报警的传感器联动功能； 可以跨平台使用，支持多个平台数据同步，走到哪您都可以享受我们提供的优质服务。</p>
                    <a target="_blank" href="http://222.25.188.1:50023"
                       class="btn btn-lg btn-danger smoothScroll wow fadeInUp" data-wow-delay="2.3s">立即使用</a>

                </div>

                <div class="wow fadeInUp col-md-5 col-sm-5" data-wow-delay="1s">

                </div>

                <div class="col-md-1"></div>

            </div>
        </div>
    </section>

    <!-- =========================
        FAQ SECTION
    ============================== -->
    <section id="faq" class="parallax-section">
        <div class="container">
            <div class="row">

                <!-- Section title
                ================================================== -->
                <div class="wow bounceIn col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10 text-center">
                    <div class="section-title">
                        <h2>关于</h2>

                    </div>
                </div>

                <div class="wow fadeInUp col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10" data-wow-delay="0.9s">
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingOne">
                                <h4 class="panel-title">
                                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
                                       href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                        关于DragonStack多域分布式云计算平台
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel"
                                 aria-labelledby="headingOne">
                                <div class="panel-body">
                                    <p>DragonStack多域分布式云计算平台旨在解决IT基础设施不足以及师生在脱离校园网时如何继续使用校园网服务等问题。
                                        平台中心由若干台高配置工作站和服务器组成，通过虚拟化工具，将这些高性能主机虚拟成多台虚拟机服务器，组建 虚拟化资源池。</p>
                                    <p>云平台提供资源动态管理，虚拟机云主机服务，云存储服务，给物联网应用及大数据提供平台支撑。
                                        用户通过云平台中心可申请云服务器,申请成功后可通过平台返回的(IP:PORT)信息,利用远程连接工具进行远程连接使用,
                                        也可通过浏览器直接打开申请成功的云主机。</p>
                                </div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                                <h4 class="panel-title">
                                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
                                       href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        关于快速部署
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
                                 aria-labelledby="headingTwo">
                                <div class="panel-body">
                                    <p>
                                        通过SSD硬盘或者U盘，在短时间内简单快捷的部署专用的云计算平台，包含IaaS服务（基础设施服务）以及资源监控，极大程度上降低技术难度于维护成本，使用户集中于应用开发或使用，以极低的成本拥有云计算平台。</p>
                                </div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingThree">
                                <h4 class="panel-title">
                                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
                                       href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                        关于云存储
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse" role="tabpanel"
                                 aria-labelledby="headingThree">
                                <div class="panel-body">
                                    <p>DragonStack云存储采用对象存储技术(Object-based Storage Device
                                        简称OSD)，综合了网络附加存储(NAS)和存储局域网(SAN)的优点，同时具有SAN的高速直接访问和NAS的分布式数据共享等优势，提供了具有高性能、高可靠性、跨平台以及安全的数据共享的存储体系结构。</p>
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingFour">
                                <h4 class="panel-title">
                                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
                                       href="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
                                        关于物联网应用平台
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseFour" class="panel-collapse collapse" role="tabpanel"
                                 aria-labelledby="headingThree">
                                <div class="panel-body">
                                    <p>形象化、专业化的展示历史数据，提供不同节点间的数据对比分析，可以对数据项目进行灵活定义；
                                        为开发者一个兼容的、开放的、安全的、可扩展的平台，可将各种传感器数据存储到数据中心；
                                        根据用户预设的策略，系统自动侦查异常情况，提供了根据传感器数据变动而自动报警的传感器联动功能；
                                        可以跨平台使用，支持多个平台数据同步，走到哪您都可以享受我们提供的优质服务。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>


{% endblock %}









